<template>
  <div>
    <my-breadcrumb :items="['商户提现', '提现操作']"></my-breadcrumb>
    <div class="btn">
      <Button type="primary" @click="accountInfo">查看账户信息</Button>
      <Button type="primary" @click="passwordDo">密码设置</Button>
    </div>
    <Table :columns="listColumn" :data="listData"></Table>
    <Modal
      v-model="showPassword"
      title="设置密码"
      width="350px">
      <keyboard @check="checkPassword" @set="setPassword" @update="setPassword" ref="keyboard"></keyboard>
      <div slot="footer"></div>
    </Modal>
    <Modal
      v-model="showWithdrawal"
      title="提现">
      <Steps :current="step" size="small">
        <Step title="输入金额"></Step>
        <Step title="输入密码"></Step>
        <Step title="结果"></Step>
      </Steps>
      <div slot="footer"></div>
      <div style="margin-top: 16px;" v-show="step === 0">
        <span>输入提现金额：</span><InputNumber v-model="transfer.amount" :min="1" :max="totalAccount"/><span style="color: red;margin-left: 16px;">账户余额：{{ totalAccount }}￥</span>
        <div style="margin-top: 8px;">
          <Button type="primary" long @click="nextStep">下一步</Button>
        </div>
      </div>
      <div v-show="step === 1">
        <keyboard once="pay" @draw="draw" ref="draw"></keyboard>
      </div>
      <div v-show="step === 2">
        处理结果：{{ result }}
      </div>
    </Modal>
  </div>
</template>

<script>
import keyboard from '../../common/keyboard'
export default {
  name: 'account-list',
  data () {
    return {
      url: {
        list: '/withdrawal/account/list',
        info: '/withdrawal/info',
        set: '/admin/manager/user/password/set',
        check: '/admin/manager/user/password/check',
        update: '/admin/manager/user/password/update',
        transfer: '/withdrawal/transfer'
      },
      listData: [],
      listColumn: [
        {
          type: 'index',
          width: 50
        },
        {
          title: '昵称',
          key: 'nickname'
        },
        {
          title: '备注',
          key: 'remark'
        },
        {
          title: '状态',
          key: 'status',
          render: (h, params) => {
            let color = ''
            let text = ''
            switch (params.row.status) {
              case 0:
                color = 'red'
                text = '审批中'
                break
              case 1:
                color = 'blue'
                text = '通过'
                break
              case 2:
                color = 'red'
                text = '审批失败'
                break
              case 3:
                text = '冻结'
                break
            }
            return h('Tag', {
              props: {
                color
              }
            }, text)
          }
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('Button', {
              props: {
                type: 'primary',
                disabled: params.row.status !== 1
              },
              on: {
                click: () => {
                  this.getMoney(params.row.id)
                }
              }
            }, '提现')
          }
        }
      ],
      showPassword: false,
      showWithdrawal: false,
      step: 0,
      transfer: {
        amount: null
      },
      totalAccount: 0,
      result: ''
    }
  },
  methods: {
    initList () {
      this.$ajax.post(this.url.list)
        .then(res => {
          if (res.data.success) {
            this.listData = res.data.data
          }
        })
    },
    accountInfo () {
      this.$ajax.post(this.url.info)
        .then(res => {
          if (res.data.success) {
            let data = res.data.data
            this.$Modal.info({
              title: '账户信息',
              render: (h) => {
                return h('div', {
                  style: {
                    fontSize: '14px'
                  }
                }, [
                  h('p', {
                    style: {
                      lineHeight: '50px'
                    }
                  }, '账户余额：' + data.accountBalance / 100 + '￥'),
                  h('p', '提现总额：' + data.balanceTotal / 100 + '￥')
                ])
              }
            })
          }
        })
    },
    passwordDo () {
      this.showPassword = true
      this.$refs.keyboard.emptyData()
    },
    setPassword (result) {
      let params = null
      if (result[2]) {
        params = {
          oldPassword: result[0],
          newPassword: result[1],
          repassword: result[2],
          type: 2
        }
        this.$ajax.post(this.url.update, params)
          .then(res => {
            if (res.data.success) {
              this.showPassword = false
              this.$Message.success('设置密码成功')
              this.$refs.keyboard.emptyData()
            }
          })
      } else {
        params = {
          password: result[0],
          repassword: result[1],
          type: 2
        }
        this.$ajax.post(this.url.set, params)
          .then(res => {
            if (res.data.success) {
              this.showPassword = false
              this.$Message.success('设置密码成功')
              this.$refs.keyboard.emptyData()
            }
          })
      }
    },
    checkPassword (password) {
      let params = {
        password: password,
        type: 2
      }
      this.$ajax.post(this.url.check, params)
        .then(res => {
          this.$refs.keyboard.callbackPassword(res.data.errorCode)
        })
    },
    getMoney (id) {
      this.transfer.accountId = id
      this.step = 0
      this.showWithdrawal = true
      this.getInfo()
    },
    draw (password) {
      let params = {
        password: password,
        type: 2
      }
      this.$ajax.post(this.url.check, params)
        .then(res => {
          if (res.data.success) {
            this.transfer.password = password
            let params = JSON.parse(JSON.stringify(this.transfer))
            params.amount *= 100
            this.$ajax.post(this.url.transfer, params)
              .then(res => {
                this.step++
                if (res.data.success) {
                  if (res.data.data === 1) {
                    this.result = '处理中'
                  } else if (res.data.data === 2) {
                    this.result = '提现成功'
                  } else {
                    this.result = '提现失败'
                  }
                } else {
                  this.result = res.data.errorMessage
                }
              })
          } else {
            this.$refs.draw.emptyData()
          }
        })
    },
    nextStep () {
      if (this.transfer.amount > this.totalAccount) {
        this.$Message.error('提现额度超出余额！')
        return
      }
      if (this.transfer.amount) {
        this.step++
        this.$refs.draw.emptyData()
      }
    },
    getInfo () {
      this.$ajax.post(this.url.info)
        .then(res => {
          if (res.data.success) {
            this.totalAccount = res.data.data.accountBalance / 100
          }
        })
    }
  },
  components: {
    keyboard
  },
  created () {
    this.initList()
    this.getInfo()
  }
}
</script>

<style scoped>
  .btn{
    margin-bottom: 16px;
  }
</style>
